<template>
  <form>
    <el-input
      class="inputChange"
      v-model="phoneChange.old"
      placeholder="请输入旧手机号"
    />
    <el-input
      class="inputChange"
      v-model="phoneChange.new1"
      placeholder="请输入新手机号"
    />
    <el-input
      class="inputChange"
      v-model="phoneChange.new2"
      placeholder="请再次输入新手机号"
    />
    <el-button class="firstButton" type="primary" @click="userPhoneNumberChange"
      >提交</el-button
    >
    <el-button @click="phoneNumberEmpty">清空</el-button>
  </form>
</template>

<script>
import axios from "axios";
export default {
  name: "PhoneChangeForm",
  data() {
    return {
      phoneChange: {
        old: "",
        new1: "",
        new2: "",
      },
    };
  },
  methods: {
    userPhoneNumberChange: function () {
      var that = this;
      axios
        .post("WebApps/phoneModification", {
          userPhone_origin: this.phoneChange.old,
          newPhone_new1: this.phoneChange.new1,
          newPhone_new2: this.phoneChange.new2,
          token: this.$store.state.token,
        })
        .then(
          function (resp) {
            if (resp.data.code == 200) {
              console.log(resp);
              that.$store.commit("setPhone", this.phoneChange.new1);
              that.$message.success("修改成功");
            } else {
              that.$message.error("修改失败");
            }
          },
          function (err) {
            console.log(err);
          }
        );
    },
    phoneNumberEmpty: function () {
      this.userPhoneNumber_origin = "";
      this.userPhoneNumber_new1 = "";
      this.userPhoneNumber_new2 = "";
    },
  },
};
</script>

<style>
</style>